<template>
  <div>
    <nav-header :headerTitle="'关于我们'" :navBgColor="'#fff'"></nav-header>
    <section class="page">
      <div class="null84"></div>
      <img
        class="p-img"
        data-type="1"
        :src="show.wapLogoUrl?show.wapLogoUrl:this.defaultImg(1)"
        @error="errorImg"
        alt
      />
      <div class="null32"></div>
      <div class="p-bbeng">BWRM {{show.wapVersion}} 版本</div>
      <div class="null84"></div>
      <div class="p-name">BWRM，旗下官方出品</div>
      <div class="null24"></div>
      <div class="p-text">BWRM，通过帮助转发朋友圈，</div>
      <div class="p-text">转发微信群获得现金奖励。</div>
      <div class="p-text">让您的朋友圈和BWRM您赚钱。</div>
      <div class="null260"></div>
      <div class="footer">
        <div class="f-items f-one">
          <img src="@/assets/images/about_time.png" alt />
          <p>2019.6.21</p>
          <div>成立时间</div>
        </div>
        <div class="f-items f-two">
          <img src="@/assets/images/about_money.png" alt />
          <p>0.60</p>
          <div>累计发放(亿)</div>
        </div>
        <div class="f-items f-three">
          <img src="@/assets/images/about_poople.png" alt />
          <p>180</p>
          <div>累计注册(万人)</div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import navHeader from "@/components/NavHeader";
import mixin from "@/utils/mixin";
export default {
  name: "about",
  mixins: [mixin],
  components: {
    navHeader
  },
  data() {
    return {
      show: {
        wapLogoUrl: "",
        wapVersion: ""
      }
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init: function() {
      this.$http.post("soft/getWapConfig", {}).then(
        res => { 
          let wapConfig =res.data ;  
          this.show.wapVersion = wapConfig.wapVersion;
          this.show.wapLogoUrl = wapConfig.wapLogoUrl;
        },
        err => {
          console.log(err);
        }
      );
      
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  margin-top: 86px;
  text-align: center;
  .null24 {
    width: 100%;
    height: 24px;
  }
  .null32 {
    width: 100%;
    height: 32px;
  }
  .null84 {
    width: 100%;
    height: 84px;
  }
  .null260 {
    width: 100%;
    height: 260px;
  }
  .p-img {
    width: 188px;
    height: 180px;
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
    border-radius: 40px;
  }
  .p-bbeng {
    font-size: 32px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(48, 49, 51, 1);
  }
  .p-name {
    font-size: 34px;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    color: rgba(48, 49, 51, 1);
  }
  .p-text {
    height: 60px;
    line-height: 60px;
    font-size: 32px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(129, 129, 129, 1);
  }
  .footer {
    width: 100%;
    height: 356px;
    position: relative;
    .f-items {
      width: 150px;
      height: 210px;
      img {
        width: 150px;
        height: 150px;
      }
      p {
        font-size: 32px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(48, 49, 51, 1);
      }
      div {
        font-size: 20px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(129, 129, 129, 1);
      }
    }
    .f-one {
      position: absolute;
      left: 61px;
      top: 0px;
    }
    .f-two {
      position: absolute;
      left: 50%;
      margin-left: -75px;
      top: 0px;
    }
    .f-three {
      position: absolute;
      right: 61px;
      top: 0px;
    }
  }
}
</style>
